<template>
	<view class="container">
		<block v-if="!isLoaded"></block>
		<block v-else>
			<block v-if="tabMenus != null && tabMenus.length > 0">
				<!-- Search Box -->
				<view class="search-box">
					<view class="inp">
						<u-input v-model="name" prefixIcon="search" placeholder="菜品名称" :clearable="true" border="none" :prefixIconStyle="prefixIconStyle" />
						<view class="btn" @click="onSearch">查询</view>
					</view>
				</view>
				<!-- Top Tabs -->
				<view class="tabs">
					<u-tabs :list="tabMenus" lineColor="#F3C45D" lineWidth="30" :activeStyle="activeStyle" @click="onTabsClick"></u-tabs>
				</view>

				<view class="content">
					<!-- Left Tab -->
					<scroll-view class="menus" scroll-with-animation scroll-y>
						<!-- 左tab栏 -->
						<block v-for="(item, _index) in leftMenus">
							<view
								v-if="currentCateId != 0"
								class="items"
								:id="`menu-${item.id}`"
								:class="{ current: item.id == currentCateId }"
								:key="item.id"
								@click="onLeftTabClick(item)"
							>
								<text>{{ item.name }}</text>
							</view>
						</block>
					</scroll-view>

					<scroll-view class="foods" scroll-with-animation scroll-y>
						<u-empty v-if="foodList == null || foodList.length == 0" />
						<block v-else>
							<view class="items" v-for="(food, index) in foodList" :key="index">
								<image class="image" :src="food.image ? food.image : require('@/static/images/classify/imgs.png')" @click="onEditImage(index)" />
								<view class="right" style="padding-bottom: 0">
									<text class="fsize-30">{{ food.name }}</text>
									<!-- <view class="label">
                <text>多规格</text>
                <text>做法</text>
                <text>加料</text>
              </view> -->
									<view class="mt-10 fsize-28">
										<text class="text-red">
											￥
											<text>{{ food.minPosPrice }}</text>
											<text v-if="food.maxPosPrice">-{{ food.maxPosPrice }}</text>
										</text>
										<!-- <text>/条</text> -->
									</view>
								</view>
								<view class="btn">
									<text style="background-color: #f3c45d; color: #fff; border: none" @click="showfoodDetailModal(food)">修改</text>
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
				<!--    <uni-fab
        ref="fab"
        :pattern="pattern"
        :popMenu="false"
        horizontal="right"
        @fabClick="fabClick"
      /> -->
			</block>
			<view v-else class="data-empty-wh100">
				<u-empty text="菜品分类为空，请添加菜品分类和菜品后再查看~~" />
			</view>
		</block>
	</view>
</template>

<script>
import { GetFood, GetFoodEdit, AddFood, DelFood, EditFood } from '../../../common/api.js';
import { uHideLoading, uShowLoading, uNavigateTo, uSwitchTab } from '../../../utils/uniUtils';
import { mapState, mapMutations } from 'vuex';
import uploadImage from '@/utils/uploadImage.js';

//  二级分类第一层
let subCategory = {
	id: 0,
	name: '全部小类'
};

export default {
	data() {
		return {
			isLoaded: false,
			searchParam: {
				name: ''
			},
			name: '',
			prefixIconStyle: {
				fontSize: '24px'
			},
			activeStyle: {
				color: '#F3C45D'
			},
			pattern: {
				buttonColor: '#F3C45D'
			},
			tabMenus: [
				{
					id: 0,
					corpId: 1001,
					storeId: 1005,
					parentId: 0,
					name: '全部',
					byName: '全部',
					appletShow: 1,
					helpCode: '5445',
					departId: 555347570597957,
					upIcon: '',
					icon: '',
					sort: 5424,
					isDelete: false,
					createTime: '2025-01-11 16:13:22',
					modifyTime: 0,
					url: '/pages/user/recharge/recharge',
					linkType: 2,
					children: [],
					storeName: '啤酒屋1005',
					foodCount: 0,
					isShare: 0
				}
			], // 顶部tab栏,
			leftMenus: [
				//  左边tab栏
			],
			currentCateId: 0, //左边默认小类Id
			foodList: []
		};
	},
	async onLoad() {
		try {
			uShowLoading();
			await this.GetFoodCategory();
			this.isLoaded = true;
			uHideLoading();
		} catch (error) {
			uHideLoading();
			setTimeout(() => {
				uSwitchTab('/pages/tabBar/staging');
			}, 800);
		}
	},
	computed: {
		...mapState('recognition', ['currentGoodsVuex'])
	},
	async onShow() {
		const that = this;
		if (that.currentGoodsVuex.from === '/pages/workbench/food/list') {
			that.foodList = [];
			that.foodList = JSON.parse(JSON.stringify(that.currentGoodsVuex.foodList));
			try {
				await this.$api.uploadFoodImage({
					foodId: that.foodList[that.currentGoodsVuex.index].id,
					url: that.foodList[that.currentGoodsVuex.index].image
				});
			} finally {
				this.setCurrentGoods({
					index: 0,
					ind: 0,
					imageUrl: '',
					foodName: '',
					from: '',
					createList: [],
					foodList: [],
					form: {}
				});
			}

			// this.GetFoodCategory();

			// this.quantity = this.createList.reduce((acc, num) => acc + num.dishes.length, 0);
		}
	},
	methods: {
		...mapMutations('recognition', ['setCurrentGoods']),
		fabClick() {
			uNavigateTo('/pages/workbench/food/transfer');
		},
		showfoodDetailModal(item) {
			// uni.$u.route("/pages/workbench/food/doEdit?id=" + item.id);
			uNavigateTo('/pages/workbench/food/doEdit?mode=edit&id=' + item.id);
		},
		/**
		 * 停售按钮点击事件
		 */
		btnStopSaleClick() {},
		/**
		 * 编辑按钮点击事件
		 */
		btnEditClick() {},
		/**
		 * 获取菜品分类
		 */
		async GetFoodCategory() {
			let {
				data: { list }
			} = await this.$api.GetFoodCategory({
				pageNum: 1,
				pageSize: 9999
			});
			this.tabMenus = [...this.tabMenus, ...list];
			if (this.tabMenus.length > 0) {
				subCategory.id = this.tabMenus[0].id;
				this.currentCateId = subCategory.id;
				this.leftMenus = [subCategory, ...this.tabMenus[0].children];
				this.GetFood(this.leftMenus[0].id);
			}
		},
		/**
		 * 顶部tab 栏点击事件
		 */
		async onTabsClick(e) {
			console.log(e, 'top menu');
			subCategory.id = e.id;
			this.currentCateId = e.id;
			this.leftMenus = [subCategory, ...e.children];
			this.GetFood(this.leftMenus[0].id);
		},
		/**
		 * 获取菜品列表
		 */
		async GetFood(foodCategoryId) {
			const res = await GetFood({
				pageNum: 1,
				pageSize: 9999,
				foodCategoryId,
				isFoodList: 1,
				name: this.name
			});
			this.foodList = res.data.list;
		},
		/**
		 *   左tab栏 点击事件
		 */
		async onLeftTabClick(item) {
			if (this.currentCateId == item.id) return;
			this.currentCateId = item.id;
			this.GetFood(item.id);
		},
		onSearch() {
			this.GetFood(this.currentCateId);
		},
		async onEditImage(index) {
			// 修改图片
			const res = await uploadImage.checkedActionSheet(['更换图片']);
			// console.log(this.foodList);

			uni.navigateTo({
				url: `/pages/workbench/recognition/checkedImage`
			});
			this.setCurrentGoods({
				index,
				ind: 0,
				imageUrl: this.foodList[index].image,
				foodName: this.foodList[index].foodTypeName,
				from: '/pages/workbench/food/list',
				createList: [],
				foodList: this.foodList,
				form: {}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '~@/pages/workbench/food/list.scss';
</style>
